<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #cv {
        border: 1px solid #999;
      }
    </style>
  </head>
  <body>
    <canvas id="cv" width="400px" height="400px">您的浏览器不支持canvas</canvas>
  </body>
  <script>
    var cv = document.getElementById("cv");
    if (cv.getContext("2d")) {
      var ctx = cv.getContext("2d");
      for (var i = 0; i < 8; i++) {
        //行
        for (var j = 0; j < 6; j++) {
          //列
          ctx.beginPath();
          var x = 25 + j * 50; // x 坐标
          var y = 25 + i * 50; // y 坐标
          var radius = 20; // 半径
          var startAngle = 0; //起始角度
          var endAngle = Math.PI / 4 + (j * Math.PI) / 4; //终止角度
          var direction = i % 2 === 0 ? false : true; //设置顺时针 false/逆时针 true
          ctx.arc(x, y, radius, startAngle, endAngle, direction);
          if (i < 4) {
            ctx.stroke();
          } else {
            ctx.fill();
          }
        }
      }
    } else {
      console.log("您的浏览器不支持canvas");
    }
  </script>
</html>
